<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title></title>
    <link rel="stylesheet" type="text/css" href="css/shoppingCar.css" />
    <!-- <link rel="stylesheet" href="css/normalize.css"> -->
    <style>
        nav {
            width: 100%;
            background-color: #000;
            position: relative;
        }
        
        footer {
            width: 100%;
            height: 580px;
            overflow: hidden;
        }
    </style>
</head>

<body>
    <nav>

    </nav>
    <div id="box_car">
        <!--nav-->
        <div class="box_nav">
            <div class="box_Select">
                <input type="checkbox" name="" id="" onclick="selectAll(this)" class="itemSelect" />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 全选
            </div>
            <ul class="box_ul">
                <li>商品</li>
                <li>单价</li>
                <li>数量</li>
                <li>小计</li>
                <li>操作</li>
            </ul>
        </div>
        <!--购物车-->
        <div class="box_nav">
            <div class="box_Select">
                <input type="checkbox" name="" id="" value="" class="itemSelect" onclick="selectAll(this)" />
                <img class="box_Select_img">
            </div>

            <ul class="box_ul">
                <li style="color: #3a3a3a" class="box_ul_li"></li>
                <li class="box_ul_price"></li>
                <li>
                    <button type="button" class="box_detailsNight_reduce">-</button>
                    <span style="color: #3a3a3a" class="box_detailsNight_num">1</span>
                    <button type="button" class="box_detailsNight_plus">+</button>
                </li>
                <li class="goods-single-price">
                </li>
                <li class="shanchu">删除</li>
            </ul>
        </div>
        <!--结算-->
        <div class="box_nav">
            <div class="box_Select">
                <input type="checkbox" name="" id="" value="" class="itemSelect" onclick="selectAll(this)" />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                <span style="color: #3a3a3a">全选</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;

            </div>
            <div class="box_Select_right">
                <div class="box_Select_num">
                    <p>总计:<span class="box_Select_numSpan">0</span>元</p>
                    <p>已选择<span class="box_Select_numSpanA">0</span>件商品</p>
                </div>
                <div class="box_Select_btn">
                    立即结算
                </div>
            </div>

        </div>
    </div>

    <div class="goChoose">
        <p>您还没有挑选商品，现在去<a href="ProductDetails.html">抢购</a>吧</p>
    </div>

    <!--底部-->
    <footer></footer>

</body>

</html>
<script src="js/jQuery.js" type="text/javascript" charset="utf-8"></script>
<script src="js/shoppingCart.js"></script>
<script>
    $('nav').load('header.html');
    $('footer').load('footer.html');

    function selectAll(check) { //全选
        $('.itemSelect').prop('checked', check.checked);
    }
</script>
<!-- <script type="text/javascript">
    window.onload = function() {
        $('nav').load('header.html');
        $('footer').load('footer.html')
        let url = window.location.search;
        console.log(url)
        $.get('../getShoppingCart.php', {
            "vipName": "renji"
        }, function(date) {
            let arr = JSON.parse(date)
            console.log(date)
            $('.box_Select_img').attr({
                src: arr[0].goodsImg
            })
            $('.box_ul_li').html(arr[0].beiyong4)
            $('.box_ul_price').html(arr[0].beiyong5)

        })

    }



    function selectAll(check) { //全选
        $('.itemSelect').prop('checked', check.checked);

    }

    //购物车	
    class ShoppingCar {
        constructor() {
            this.Event()
        }

        //获取数量赋值给商品总数
        quantity() {
            let goodsNum = document.querySelectorAll('.goods-num');
            let goodsTotalNum = 0;

            for (let i = 0; i < goodsNum.length; i++) {
                goodsTotalNum += Number(goodsNum[i].innerHTML)
            }
            let goodsTotalNumA = document.querySelector('.box_Select_numSpanA');
            goodsTotalNumA.innerHTML = goodsTotalNum;
        }


        // 获取小计之和赋值给花费
        spend() {



            let goodsSinglePrice = document.querySelectorAll('.goods-single-price');
            let goodsTotalPrice = 0;

            for (let i = 0; i < goodsSinglePrice.length; i++) {
                goodsTotalPrice += Number(goodsSinglePrice[i].innerHTML)
            }
            let goodsTotalPriceA = document.querySelector('.box_Select_numSpan');
            goodsTotalPriceA.innerHTML = goodsTotalPrice;



        }

        //写一个计算小计方法
        Subtotal(num, price) {
            return num * price;
        }

        //增加
        addNum(btn) {

            let goodsNum = btn.previousElementSibling; //根据点击动态获取到数量
            goodsNum.innerHTML = goodsNum.innerHTML / 1 + 1 //动态添加数量

            //拿到单价
            let goodsPrice = btn.parentNode.previousElementSibling; //根据点击动态获取到单价

            let goodsTotalNumA = btn.parentNode.nextElementSibling //根据点击动态获取到小计

            //计算小计
            goodsTotalNumA.innerHTML = this.Subtotal(goodsNum.innerHTML / 1, goodsPrice.innerHTML / 1) //调用计算小计的方法 注意拿到的是字符串

            this.quantity();
            this.spend();
        }

        //减少
        reduceNum(btn) {
            let goodsNum = btn.nextElementSibling; //根据点击动态获取到数量

            //动态添加数量
            if (goodsNum.innerHTML > 0) {
                goodsNum.innerHTML = goodsNum.innerHTML - 1
                    //拿到单价
                let goodsPrice = btn.parentNode.previousElementSibling; //根据点击动态获取到单价

                let goodsTotalNumA = btn.parentNode.nextElementSibling; //根据点击动态获取到小计

                //计算小计
                goodsTotalNumA.innerHTML = this.Subtotal(goodsNum.innerHTML / 1, goodsPrice.innerHTML) //调用计算小计的方法 注意拿到的是字符串
                this.quantity();
                this.spend();
            }

        }

        //删除
        Delete(btn) {
            let DeleteElement = btn.parentNode.parentNode; //获取到一行的tr

            DeleteElement.remove();

            this.quantity();
            this.spend();
        }



        //绑定事件
        Event() {
            let that = this;
            //绑定数量加减事件
            let _button = document.querySelectorAll('button');
            for (let i = 0; i < _button.length; i++) {
                if (i % 2) {
                    _button[i].onclick = function() {
                        that.addNum(this)
                    }
                } else {
                    _button[i].onclick = function() {
                        that.reduceNum(this)
                    }
                }
            }

            //绑定删除事件
            let DeleteElement = document.querySelectorAll('.shanchu');

            for (let i = 0; i < DeleteElement.length; i++) {
                DeleteElement[i].onclick = function() {
                    that.Delete(this);
                    $.get('../deleteGoods.php', {
                        "vipName": "renji",
                        "goodsId": "001"
                    }, function(data) {
                        console.log(data)
                    })
                }
            }


        }
    }
    let s = new ShoppingCar();
</script> -->